<template>
  <div id="abolish">
    <div class="scroll-wrap" ref="wrapper">
      <!-- <div class="tip">
          <md-notice-bar icon="info" mode="link">场景普法：业主如何要求召开业主大会表决</md-notice-bar>
      </div>-->

      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{pulldownMsg}}</span>
        </div>
        <!-- 内容列表 -->
        <div class="content">
          <div class="scroll-item" v-for="(item,index) in list" :key="index">
            <div class="top" @click="download(item.number)">
              <span class="id">业主提议编号：{{item.number}}</span>
              <span class="status">征集中</span>
            </div>
            <div class="mid" @click="download(item.number)">
              <h3>{{item.title}}</h3>
              <div class="content">
                <p class="desc">{{item.content}}</p>
                <p class="time">征集时效至：{{item.days}}</p>
              </div>
            </div>
            <div class="bottom">
              <div class="progress">
                <md-progress :size="50" :value="item.vote_per * 0.01" :width="5" :rotate="-90">
                  <span class="progress-value">{{item.vote_per}}%</span>
                </md-progress>
                <!-- ，要通过还差{{item.less_num}}票 -->
                <p class="pr-tip">{{item.agere_vote}}位业主已支持</p>
              </div>
              <div class="op">
                <div class="share" @click="shareSuggest(item.number)">
                  <!-- <i></i> -->
                  <span>分享给小区业主</span>
                </div>
                <div class="dow" @click="download(item.number)">
                  <!-- <i></i> -->
                  <span>详情下载</span>
                </div>
              </div>
            </div>
            <div class="btn-blcok">
              <div
                class="btn no-join"
                @click="showAgereVote(item.id,item.number)"
                v-if="item.join == 0"
              >赞成</div>
              <div class="btn have-join" v-if="item.join == 1">您已投赞成</div>
            </div>
          </div>
        </div>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{pullupMsg}}</span>
        </div>
      </div>
    </div>
    <!-- 验证密码 -->
    <div class="verify-vote-layer" v-if="showVoteLayer">
      <p class="error-text" v-if="isErrorText">{{errorText}}</p>
      <div class="inner-content">
        <h3>请验证您的密码</h3>
        <p class="tip">{{firstPassword}}~是您的密码首字母</p>
        <div class="sel-items">
          <input type="password" v-model="passwordValue" placeholder="请输入您的密码" />
        </div>
        <p class="modify-password">
          <span @click="nvaModifyPassword">忘记密码？</span>
        </p>
        <div class="btn-block">
          <div class="cancel" @click="showVoteLayer = false">取消</div>
          <div class="confirm" @click="confirmVote">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import https from "@/https";
import config from "@/config";
import { NoticeBar, Progress, Button, Toast } from "mand-mobile";
export default {
  name: "abolish",
  components: {
    [NoticeBar.name]: NoticeBar,
    [Progress.name]: Progress,
    [Button.name]: Button
  },
  data() {
    return {
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      list: [], //
      pn: 1, //
      id: 0, // 投票的提议id
      number: "", //投票的提议号码

      firstPassword: "", //密码首字
      passwordValue: "", //验证密码
      showVoteLayer: false, // 投票验证框
      isErrorText: false, //密码验证错误弹窗
      errorText: "密码输入有误" //错误文本
    };
  },
  computed: {
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    }
  },
  methods: {
    // 获取列表
    voteList() {
      Toast.loading("加载中...");
      let qid = this.$store.state.residentialType.qid;
      let params = {
        mobile: this.mobile,
        status: 1,
        pn: 1,
        pagesize: 10,
        qid,
        uid: this.$store.state.userInfo.id
      };
      https
        .fetchPost(config.voteList, params)
        .then(res => {
            Toast.hide();
          if (res.data.code == 1) {
            let list = res.data.data;
            if (list.length != 0) {
              list.forEach(element => {
                element.days = this.dataFormat(
                  element.days * 3600 * 24 * 1000 + element.createtime * 1000,
                  2
                );
              });
            }
            this.list = list;
            this.pn = 1;
            //恢复刷新提示文本值
            this.pulldownMsg = "下拉刷新";
            //刷新列表后，重新计算滚动区域高度
            this.scroll.refresh();
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
            Toast.hide();
          console.log(err);
        });
    },
    //获取更多
    moreVoteList() {
      Toast.loading("加载中...");
      let qid = this.$store.state.residentialType.qid;
      let pn = this.pn + 1;
      let params = {
        mobile: this.mobile,
        status: 1,
        pn,
        pagesize: 10,
        qid,
        uid: this.$store.state.userInfo.id
      };
      https
        .fetchPost(config.voteList, params)
        .then(res => {
            Toast.hide();
          console.log(res.data);
          if (res.data.code == 1) {
            let newList = res.data.data;
            if (newList.length != 0) {
              newList.forEach(element => {
                element.days = this.dataFormat(
                  element.days * 3600 * 24 * 1000 + element.createtime * 1000,
                  2
                );
              });
              let oldList = this.list;
              this.list = oldList.concat(newList);
              this.pn = pn;
              this.pullupMsg = "加载更多";
              this.scroll.refresh();
            } else {
              Toast.failed("没有更多咯");
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
            Toast.hide();

          console.log(err);
        });
    },
    // 下载
    download(number) {
      this.$router.push({
        path: "/download",
        query: { number: number }
      });
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (type == 1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d + " " + h + ":" + i;
      }
    },
    // 赞成
    showAgereVote(id, number) {
      this.id = id;
      this.number = number;
      this.firstPassword = this.$store.state.userInfo.acronym_password;
      this.showVoteLayer = true;
      this.passwordValue = "";
    },
    // 提交投票信息
    confirmVote() {
      let params = {
        mobile: this.mobile,
        id: this.id,
        qid: this.$store.state.residentialType.qid,
        number: this.number,
        password: this.passwordValue
      };
      https
        .fetchPost(config.agereVote, params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 1) {
            Toast.succeed(res.data.msg);
            this.showVoteLayer = false;
            this.voteList();
          } else {
            this.isErrorText = true;
            this.errorText = res.data.msg;
            setTimeout(() => {
              this.isErrorText = false;
            }, 2500);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 忘记密码
    nvaModifyPassword() {
      this.$router.push({
        path: "/modifyPassword"
      });
    },
    //分享提议
    shareSuggest(number) {
      this.$store.commit("saveShareSuggest", true);
      let qid = this.$store.state.residentialType.qid;
      this.$router.push({
        path: "/shareSuggest",
        query: { qid: qid, number: number }
      });
    }
  },
  created() {
    this.voteList();
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true //是否派发click事件
      });
      // 滑动过程中事件
      this.scroll.on("scroll", pos => {
        if (pos.y > 30) {
          this.pulldownMsg = "释放立即刷新";
        }
      });
      //滑动结束松开事件
      this.scroll.on("touchEnd", pos => {
        //上拉刷新
        if (pos.y > 30) {
          this.voteList();
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //下拉加载
          this.pullupMsg = "加载中。。。";
          this.moreVoteList();
        }
      });
    });
  }
};
</script>

<style lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-notice-bar {
  z-index: 1;
}
#abolish {
  background: #fff;
  .scroll-wrap {
    height: calc(100vh - 100px);
    .tip {
      padding: 30px 30px;
    }
    .scroll-item {
      box-shadow: 0 1px 16px #ddd;
      margin: 0 30px 30px;
      padding-bottom: 25px;
      border-radius: 8px;
      .top {
        padding: 0 20px;
        font-size: 24px;
        color: #fff;
        display: flex;
        background: linear-gradient(to right, #5299f5, #2f86f6);
        justify-content: space-between;
        align-items: center;
        height: 70px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .status {
          color: #fff;
          font-size: 26px;
        }
      }
      .mid {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 0 20px;
        h3 {
          font-size: 30px;
          line-height: 50px;
          padding: 20px 0 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .content {
          display: flex;
          flex-direction: column;
          margin-top: 15px;
          .desc {
            font-size: 26px;
            color: #777;
            line-height: 40px;
          }
          .time {
            font-size: 24px;
            color: #2f86f6;
            line-height: 50px;
            margin: 20px 0 10px;
          }
        }
      }
      .bottom {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        margin-top: 10px;
        .progress {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 0 10px;
          width: 210px;
          .progress-value {
            font-size: 26px;
            color: #666;
          }
          .pr-tip {
            margin-top: 10px;
            font-size: 24px;
            color: #2f86f6;
            line-height: 35px;
          }
        }
        .op {
          display: flex;
          flex-direction: column;
          color: #444;
            font-size: 26px;

          i {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
          .share {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 230px;
            height: 50px;
            border-radius: 50px;
            border: 1px solid #c5cad5;
            i {
              background: url("/static/images/suggest/share.png") center center
                no-repeat;
              background-size: 100%;
            }
          }
          .dow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 230px;
            height: 50px;
            border-radius: 50px;
            border: 1px solid #c5cad5;
            margin-top: 18px;
            i {
              background: url("/static/images/suggest/dow.png") center center
                no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      .btn-blcok {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #c5cad5;
          width: 200px;
          height: 60px;
          border-radius: 50px;
          font-size: 28px;
          margin: 0 20px;
          color: #444;
          background: #fff;
          &.no-join {
            background: #2f86f6;
            border: 1px solid #2f86f6;
            color: #fff;
          }
        }
      }
    }
  }
  .bscroll-container {
    padding-top: 30px;
    padding-bottom: 25px;
  }
  .top-tip {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    text-align: center;
    color: #ccc;
  }
  .bottom-tip {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #999;
    font-size: 28px;
    position: absolute;
    bottom: -30px;
    left: 0;
  }
  //  <!-- 验证密码 -->
  .verify-vote-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 998 !important;
    background: rgba(0, 0, 0, 0.6);
    .error-text {
      position: absolute;
      top: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 26px;
      color: #fff;
      text-align: center;
      background: #e22c1f;
    }
    .inner-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 560px;
      border-radius: 12px;
      padding: 30px 30px 0;
      h3 {
        display: flex;
        justify-content: center;
        font-size: 32px;
        color: #333;
        padding-bottom: 50px;
        padding-top: 20px;
      }
      .tip {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        height: 60px;
        width: 350px;
        padding: 0 30px;
        color: rgb(226, 11, 11);
      }
      .sel-items {
        display: flex;
        justify-content: center;
        input {
          border: none;
          outline: none;
          width: 350px;
          height: 60px;
          font-size: 30px;
          color: #444;
          background: #f9f9f9;
          padding: 0 20px;
        }
      }
      .modify-password {
        text-align: right;
        color: #2f86f6;
        font-size: 24px;
        padding: 30px 0;
        span {
          padding: 10px;
        }
      }
      .btn-block {
        display: flex;
        border-top: 1px solid #f1f1f1;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 100px;
          color: #2f86f6;
          font-size: 30px;
          &.cancel {
            color: #999;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 20px;
              right: 0;
              width: 1px;
              height: 60px;
              background: #f2f2f2;
            }
          }
        }
      }
    }
  }
}
</style>
